import { WebGLRenderer, PCFSoftShadowMap,SRGBColorSpace } from 'three';
import { sizes } from '../system/sizes';
//threejs对象WebGL渲染器WebGLRenderer。
//WebGL渲染器的功能字面意思就是渲染三维场景，
//再具体点就是控制相机Camera对3D场景Scene进行"拍照","拍照"结果呈现到Canvas画布上面
function createRenderer(container) {
    const renderer = new WebGLRenderer({
        canvas: container,//渲染器挂载的容器dom元素
        antialias: true, //抗锯齿
        logarithmicDepthBuffer: true, //图层交叉闪烁问题z-buffer
        alpha: true, // canvas是否包含alpha (透明度) 默认为 false
        precision: 'highp',
    })
    // 加载阴影
    renderer.shadowMap.enabled = true
    renderer.shadowMap.type = PCFSoftShadowMap
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    renderer.outputColorSpace = SRGBColorSpace
    renderer.setClearAlpha(0.0) // 设置alpha，合法参数是一个 0.0 到 1.0 之间的浮点数

    //设备像素比.devicePixelRatio是window对象的一个属性，该属性的值和你的硬件设备屏幕相关，
    //不同硬件设备的屏幕window.devicePixelRatio的值可能不同，可能就是1、1.5、2.0等其它值。

    // 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
    //renderer.setPixelRatio(window.devicePixelRatio);
    //renderer.setClearColor(0x000000);//设置背景颜色

    renderer.autoClear = false;
    renderer.gammaInput = true;
    renderer.gammaOutput = true;//inear转gamma
    renderer.xr.enabled = false;
    // 按层级先后渲染
    renderer.sortObjects = true;
    
    return renderer
}

export { createRenderer }